<template>
  <div class="pay-content">
    <div class="pay">
      <div class="price">
        <span>合计:</span>
        <span>￥{{ consultPrice == 0 ? "免费" : consultPrice + "元" }}</span>
      </div>
      <div class="pay-btn" @click="payHandle">
        {{ consultPrice == 0 ? "确认预约" : "立即支付" }}
      </div>
    </div>
    <Modal
      v-model="payIsShow"
      title="选择支付方式"
      @on-ok="ok"
      @on-cancel="cancel"
      :scrollable="false"
      width="804"
      footer-hide
    >
      <div class="price">
        <span>￥</span>
        <span style="padding-left: 5px">{{ consultPrice }}</span>
      </div>
      <div class="wx-pay">
        <div class="wx-row">
          <img class="wx" src="@/assets/online_consulting/pay/wx.png" alt="" />
          <span>微信支付</span>
        </div>
        <img
          class="wx-choose"
          @click="choosePayHandle('WECHAT')"
          :src="
            payWay == 'WECHAT'
              ? require('@/assets/online_consulting/pay/choosed.png')
              : require('@/assets/online_consulting/pay/choose.png')
          "
          alt=""
        />
      </div>
      <div class="zfb-pay">
        <div class="zfb-row">
          <img
            class="zfb"
            src="@/assets/online_consulting/pay/zfb.png"
            alt=""
          />
          <span>支付宝</span>
        </div>
        <img
          @click="choosePayHandle('ALIPAY')"
          class="zfb-choose"
          :src="
            payWay == 'ALIPAY'
              ? require('@/assets/online_consulting/pay/choosed.png')
              : require('@/assets/online_consulting/pay/choose.png')
          "
          alt=""
        />
      </div>
      <div class="pay-btn" @click="payMoneyHandle">立即支付</div>
    </Modal>
  </div>
</template>
<script>
import bus from "@/libs/bus.js";
export default {
  data() {
    return {
      payIsShow: false,
      payWay: "ALIPAY",
      consultPrice: 0,
    };
  },
  props: {
    action: {
      type: String,
      default: "online",
    },
    //订单id
    currentSnId: {
      type: String,
      default: null,
    },
  },
  mounted() {
    this.consultPrice = Number(localStorage.getItem("consultPrice"));
    //支付成功
    bus.$on("payStatus", (val) => {
      if (val) {
        if (this.action == "online") {
          this.$Message.success("支付成功");
          setTimeout(() => {
            this.$router.push({
              path: "/onlineConsultingDetails",
              query: {
                user_id: this.$route.query.user_id,
                name: JSON.parse(this.$route.query.nameObj).username,
                sex: JSON.parse(this.$route.query.nameObj).sex,
                text: this.$route.query.text,
                imgList: this.$route.query.imgList
              },
            });
          }, 2000);
        }
      }
    });
  },
  methods: {
    payHandle() {
      if (this.consultPrice == 0) {
        this.$Message.success("预约成功");
        this.$router.push({
            path: "/onlineConsultingDetails",
            query: {
              user_id: this.$route.query.user_id,
              name: JSON.parse(this.$route.query.nameObj).username,
              sex: JSON.parse(this.$route.query.nameObj).sex,
              text: this.$route.query.text,
              imgList: this.$route.query.imgList
            },
          });
        // setTimeout(() => {
        //   this.$router.push({
        //     path: "/",
        //   });
        // }, 2000);
      } else {
        this.payIsShow = true;
      }
    },
    //选择支付方式
    choosePayHandle(name) {
      this.payWay = name;
    },
    //支付
    payMoneyHandle() {
      var params = {};
        params.paymentMethod = this.payWay;
        params.sn = this.currentSnId;
        params.clientType = "PC";
        params.paymentClient = "NATIVE";
        params.orderType = "ONLINE_CONSULT";
        params.price = this.consultPrice;
        bus.$emit("payQrShow", params);
    },
    ok() {},
    cancel() {},
  },
};
</script>
<style lang="scss" scoped>
.pay-content {
  display: flex;

  .pay {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(191 / 1920 * 100vw);

    .price {
      > span:first-of-type {
        color: #646464;
        font-size: calc(16 / 1920 * 100vw);
      }

      > span:last-of-type {
        color: #fd5151;
        font-size: calc(18 / 1920 * 100vw);
      }
    }

    .pay-btn {
      width: calc(160 / 1920 * 100vw);
      height: calc(48 / 1920 * 100vw);
      border-radius: calc(4 / 1920 * 100vw);
      font-size: calc(18 / 1920 * 100vw);
      background: #fd5151;
      color: #fff;
      text-align: center;
      line-height: calc(48 / 1920 * 100vw);
      margin-top: calc(20 / 1920 * 100vw);
      cursor: pointer;
    }
  }
}

:deep(.ivu-radio-group) {
  margin-left: 10px;
}

:deep(.ivu-modal-footer) {
  border-top: none;
}

:deep(.ivu-modal-header-inner) {
  text-align: center;
  font-size: 20px;
}

:deep(.ivu-modal-header) {
  border: none;
}

:deep(.price) {
  text-align: center;
  color: #f4333c;
  margin-top: 65px;

  > span:first-of-type {
    font-size: 23px;
  }

  > span:last-of-type {
    font-size: 46px;
  }
}

:deep(.wx-pay) {
  width: 540px;
  margin: 50px auto 0px;
  display: flex;
  justify-content: space-between;

  .wx-row {
    display: flex;
    align-items: center;

    .wx {
      width: 29px;
      height: 25px;
    }

    > span {
      font-size: 23px;
      margin-left: 9px;
    }
  }

  .wx-choose {
    width: 28px;
    height: 28px;
    cursor: pointer;
  }
}

:deep(.zfb-pay) {
  width: 540px;
  margin: 40px auto 0px;
  display: flex;
  justify-content: space-between;

  .zfb-row {
    display: flex;
    align-items: center;

    .zfb {
      width: 26px;
      height: 25px;
    }

    > span {
      font-size: 23px;
      margin-left: 13px;
    }
  }

  .zfb-choose {
    width: 28px;
    height: 28px;
    cursor: pointer;
  }
}

:deep(.pay-btn) {
  width: 160px;
  height: 48px;
  background: #fd5151;
  font-size: 18px;
  color: #fff;
  margin: 130px auto 0px;
  line-height: 48px;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
  margin-bottom: 50px;
}
</style>
